<template>
  <div class="content">
    <div class="header">
      <div class="topic">
        <img :src="topic">
      </div>
      <div class="change-topic">
        <div @click="upTopic()">{{uploadStr}}</div>
        <input ref="change" style="display:none" @change="changeTopic($event)" type="file">
      </div>
      <div class="username">账号：{{userInfo.username}}</div>
      <div class="nickname">昵称：{{userInfo.nickname}}</div>
    </div>
    <div class="account">
      <div class="money">{{userInfo.money}}</div>
      <div class="quan">查看代金券</div>
    </div>
    <div class="main">
      <div class="rows">
        <router-link to='/order'>
          <div class="rows-left">投注订单</div>
          <div class="rows-right">>></div>
        </router-link>
      </div>
      <div class="rows">
        <router-link to='/MoneyRecord'>
        <div class="rows-left">账户明细</div>
        <div class="rows-right">>></div>
        </router-link>
      </div>
      <div class="rows">
        <router-link to='/tixian'>
          <div class="rows-left">提现</div>
          <div class="rows-right">>></div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { postData } from '../common/js/axios'
import { baseUrl, imgUrl } from '../../src/common/js/url'
import axios from 'axios'
export default {
  data () {
    return {
      userInfo: {},
      uploadStr: '更换头像',
      topic: '',
      imgUrl: imgUrl,
      topicIsChange: 0 // 当前图片上传状态 0-上传 1-上传确认
    }
  },
  mounted () {
  },
  created () {
    let username = 'user888'
    let Obj = {}
    Obj.username = username
    postData('/User/userBaseInfo', Obj)
      .then(res => {
        console.log(res)
        this.userInfo = res
        this.topic = res.topic
      })
  },
  methods: {
    upTopic: function () { // 模拟点击上传图片
      if (this.topicIsChange === 0) { // 上传图片
        this.$refs['change'].click()
      } else if (this.topicIsChange === 1) { // 确认上传
        let Obj = {}
        Obj.username = this.userInfo.username
        Obj.topic = this.topic
        postData('/User/changeTopic', Obj)
          .then(res => {
            if (res === 1) {
              alert('修改完成')
              this.uploadStr = '更换头像'
              this.topicIsChange = 0
            }
          })
      }
    },
    changeTopic: function (e) {
      let img = e.target.files[0]
      let imgInfo = new FormData() // 创建一个formData对象实例
      imgInfo.append('file', img) // 通过append方法添加数据
      let headersVal = {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }
      console.log(imgInfo.get('file'))
      // /Qiniu/upload  七牛上传接口
      // /Upload/upload  本地上传接口
      axios.post(baseUrl + '/Qiniu/upload', imgInfo, headersVal).then(res => {
        if (res.data.result === 'success') {
          this.uploadStr = '点击确定'
          this.topic = res.data.filename
          this.topicIsChange = 1
        }
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../common/css/public.styl'
.content
  padding 0;
  margin 0;
  position fixed;
  z-index 101;
  left 0;
  top 1rem;
  border-radius 0;
  .header
    width 10rem;
    height 4rem
    position relative
    float left
    .topic
      width 1.6rem;
      height 1.6rem;
      border-radius: 50%;
      background #ff0000;
      position absolute;
      left 1.5rem;
      top 1.2rem;
      overflow hidden
      img
        width 1.6rem;
        height 1.6rem;
    .change-topic
      width 1.6rem;
      height 0.8rem;
      line-height 0.8rem;
      position absolute;
      left 1.5rem;
      top 3rem;
    .username
      position absolute
      left 5rem;
      top 1.5rem;
    .nickname
      position absolute
      left 5rem;
      top 2rem;
  .account
    width 10rem;
    height 1rem;
    float left
    text-align center;
    line-height 1rem;
    background #ff0000;
    color #fff;
    .money
      width 5rem;
      height 1rem;
      float left
    .quan
      width 5rem;
      height 1rem;
      float left
  .main
    width 10rem;
    position fixed;
    top 6rem
    bottom 0
    left 0
    box-sizing border-box;
    padding-top 0.5rem;
    .rows
      width 10rem;
      height 1rem;
      float left
      line-height 1rem;
      color #000;
      .rows-left
        width 5rem
        height 1rem
        float left
        box-sizing border-box;
        padding-left 0.3rem;
      .rows-right
        width 5rem;
        height 1rem;
        float left
        box-sizing border-box;
        padding-right 0.3rem;
        text-align right
    .rows:nth-of-type(odd)
      background #c0c0c0;
    .rows a
      color #000;
      text-decoration none;
</style>
